@use "../variables" as *;

.svc-flex-container {
  display: flex;
}

.svc-flex-row {
  display: flex;
  flex-direction: row;
  background: var(--ctr-surface-background-color, var(--sjs-special-background, #edf9f7ff));
}

.svc-full-container {
  height: 100%;
  width: 100%;
}

.svc-flex-row.svc-full-container {
  height: calcSize(60);
  min-height: calcSize(60);
  flex-grow: 1;
  position: relative;
}

.svc-flex-row__element--growing {
  flex: 1;
  overflow: auto;
}

.svc-flex-column {
  display: flex;
  flex-direction: column;
}

.sv-action-bar--default-size-mode .sv-action-bar-separator {
  height: calcSize(5);
}
.sv-action-bar--default-size-mode .sv-action-bar-item {
  height: auto;
  width: auto;
}

.sv-action-bar--small-size-mode .sv-action-bar-separator {
  height: calcSize(4);
}
.sv-action-bar--small-size-mode .sv-action-bar-item {
  height: auto;
  width: auto;
}

.svc-creator--mobile {
  .sv-action-bar-separator {
    height: var(--sjs-spacing-x3);
  }
}

.sv-action-bar--small-size-mode .sv-action-bar-item {
  @include ctrSmallBoldFont;
  align-items: center;
  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, var(--lbr-corner-radius-x075));
}

.svc-top-bar {
  display: flex;
  background: var(--ctr-menu-item-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  box-sizing: border-box;
  box-shadow: inset 0px -1px 0px var(--ctr-menu-border-color, var(--sjs-border-25, #d4d4d4ff));

  .svc-toolbar-wrapper {
    flex: 0 0 auto;
    display: flex;

    .sv-action-bar {
      padding: var(--ctr-menu-toolbar-padding-vertical, var(--sjs-spacing-x150)) var(--ctr-menu-toolbar-padding-horizontal, var(--sjs-spacing-x2));
      justify-content: flex-end;
    }

    .sv-action-bar-separator {
      display: none;
    }

    .sv-action-bar > .sv-action:not(.sv-action--hidden) ~ .sv-action .sv-action-bar-separator {
      --thm-menu-toolbar-button-height: calc(
        var(--ctr-menu-toolbar-button-padding-top, var(--sjs-spacing-x1)) + var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-spacing-x1)) +
          var(--ctr-menu-toolbar-button-icon-width, var(--sjs-font-size-x3))
      );

      display: inline-block;
      margin: 0;
      margin-inline-start: var(--ctr-menu-toolbar-gap, var(--sjs-spacing-x2));
      height: var(--thm-menu-toolbar-button-height, calcSize(5));
    }

    .sv-action {
      .sv-action-bar-item {
        margin: 0;
        padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-spacing-x1))
          var(--ctr-menu-toolbar-button-padding-right, var(--sjs-spacing-x1))
          var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-spacing-x1))
          var(--ctr-menu-toolbar-button-padding-left, var(--sjs-spacing-x1));
      }
      .sv-action-bar-item--active {
        background: var(--ctr-menu-toolbar-button-background-color-selected, var(--sjs-primary-background-10, #19b3941a));
      }
    }
    .sv-action:not(.sv-action--hidden) ~ .sv-action:not(.sv-action--hidden) {
      .svc-toolbar__item {
         margin-inline-start: var(--ctr-menu-toolbar-gap, var(--sjs-spacing-x2))
      }
    }

  }

  .sv-action-bar-separator {
    background-color: var(--ctr-separator-color, var(--sjs-border-25, #d4d4d4ff));
  }

  .sv-action-bar-item-dropdown {
    border-radius: calcCornerRadius(0.5);
    background-color: transparent;
  }
}

.svc-toolbar__item {
  @include ctrDefaultFont;
  border-radius: var(--ctr-menu-toolbar-button-corner-radius, var(--lbr-corner-radius-x075));
  background-color: transparent;
  color: var(--ctr-menu-toolbar-button-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
  transition: background-color $creator-transition-duration;
  height: auto;
  appearance: none;
  display: flex;
  border: none;
  use {
    fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf))
  }
  //hovered and focused state
  &:hover,
  &:focus {
    background-color: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-layer-1-background-400, #f5f5f5ff));
  }

  //pressed state
  &:active,
  &.svc-toolbar__item--pressed {
    opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
    background-color: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
  }

  //checked state
  &.svc-toolbar__item--active {
    background-color: var(--ctr-menu-toolbar-button-background-color-selected, var(--sjs-primary-background-10, #19b3941a));
    use {
      fill: var(--ctr-menu-toolbar-button-icon-color-selected, var(--sjs-primary-background-500, #19b394ff));
    }
  }

  //disabled state
  &:disabled {
    background-color: transparent;
    opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
    cursor: default;
    use {
      fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
    }
  }
}

.svc-toolbar__item--icon {
  padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-spacing-x1))
    var(--ctr-menu-toolbar-button-padding-right, var(--sjs-spacing-x1))
    var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-spacing-x1))
    var(--ctr-menu-toolbar-button-padding-left, var(--sjs-spacing-x1));
  border-radius: var(--ctr-menu-toolbar-button-corner-radius, var(--sjs-corner-radius-x1));
}

.svc-toolbar-item__icon {
  width: var(--ctr-menu-toolbar-button-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-menu-toolbar-button-icon-height, var(--sjs-font-size-x3));

  use {
    fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
  }
}
.svc-toolbar-item__title {
  color: var(--ctr-menu-toolbar-button-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
  @include ctrDefaultFont;
}


.svc-footer-bar {
  .svc-toolbar-wrapper {
    .svc-toolbar {
      justify-content: center;
      padding: 0;
      width: 100%;

      padding: var(--ctr-menu-toolbar-padding-vertical-mobile, var(--sjs-spacing-x05)) var(--ctr-menu-toolbar-padding-horizontal, var(--sjs-spacing-x2));
      background:  var(--ctr-menu-background-color, var(--sjs-layer-1-background-500, #ffffffff));
      border-top: var(--ctr-menu-border-width, var(--sjs-stroke-x1)) solid var(--ctr-menu-border-color, var(--sjs-border-25, #d4d4d4ff));
      box-sizing: border-box;
    }

    .svc-toolbar__item {
      margin: 0 var(--sjs-spacing-x1);
    }
  }
}